<template>
  <div class="shopcart">
    <div class="addBtn" v-if="bookitem && bookitem.purcharsenum === 0">
      <div class="addBtn-inner" @click="addBookToShopCart(bookitem)">
        添加购物车
      </div>
    </div>
    <div v-else>
      <div class="shopcart-operate" v-if="bookitem && bookitem.purcharsenum > 0">
        <span
          class="shopcart-operate-minus"
          v-show="bookitem.purcharsenum > 1"
          @click="appOrSubtrBookFrmShopCart(bookitem, $event)"
          ><span class="inner">-</span></span
        >
        <span
          class="shopcart-operate-del"
          v-show="bookitem.purcharsenum === 1"
          @click="delCurBookFrmSC(bookitem)"
          ><span class="inner">
            <i class="iconfont icon-shanchu shanchu"></i
          ></span>
        </span>
        <span class="purchasenum">{{ bookitem.purcharsenum }}</span>
        <span
          class="shopcart-operate-add"
          @click="appOrSubtrBookFrmShopCart(bookitem, $event)"
          ><span class="inner">+</span></span
        >
      </div>
      <div class="shopcart-operate" v-else-if="shopcart && shopcart.bookisbn">
        <span
          class="shopcart-operate-minus"
          v-show="shopcart.purcharsenum > 1"
          @click="appOrSubtrBookInShopCart(shopcart, $event)"
          ><span class="inner">-</span></span
        >
        <span
          class="shopcart-operate-del"
          @click="delCurBookInSC(shopcart)"
          v-show="shopcart.purcharsenum === 1"
          ><span class="inner">
            <i class="iconfont icon-shanchu shanchu"></i
          ></span>
        </span>
        <span class="purchasenum">{{ shopcart.purcharsenum }}</span>
        <span
          class="shopcart-operate-add"
          @click="appOrSubtrBookInShopCart(shopcart, $event)"
          ><span class="inner">+</span></span
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BookInfo } from "@/piniastore/book/state"
import ShopCartClass from "../service/shopcart"
import { ShopCart } from "@/piniastore/shopcart/state";
const { addBookToShopCart, appOrSubtrBookFrmShopCart, delCurBookFrmSC, appOrSubtrBookInShopCart, delCurBookInSC } =
  ShopCartClass
defineProps<{
  bookitem?: BookInfo
  shopcart?: ShopCart
}>()
</script>

<style lang="scss" scoped>
.shopcart {
  margin-top: 0.15rem;
  .addBtn {
    &-inner {
      width: 90%;
      height: 0.32rem;
      line-height: 0.32rem;
      background-color: #fef3ed;
      color: #db8441;
      text-align: center;
      padding: 0.05rem;
      margin: 0 auto;
      border-radius: 0.2rem;
    }
  }
  &-operate {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.3rem;

    &-add,
    &-minus {
      padding: 0.15rem;
      .inner {
        display: inline-block;
        text-align: center;
        background-color: #1985f1;
        width: 0.3rem;
        height: 0.3rem;
        line-height: 0.26rem;
        color: #fff;
        border-radius: 50%;
      }
    }
    &-del {
      padding: 0.15rem;
      .shanchu {
        font-size: 0.25rem;
        position: relative;
        top: 0.02rem;
      }
    }
    .purchasenum {
      font-size: 0.25rem;
    }
  }
}
</style>
